<style lang="scss" scoped>
  $mainColor: #179AFE;
  $borderColor: #e9e9e9;

  .com-no-date{
    margin-top: 2rem;
    text-align: center;
    font-size: .32rem;
    color: #999;
  }

  .income-list{
    .item{
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid $borderColor;
      padding: .2rem;
      background-color: #fff;
      .item-left{
        color: #333;
        .tit{
          font-size: .28rem;
          margin-bottom: .1rem;
          color: #666;
        }
        .date{
          font-size: .24rem;
          color: #999;
        }
      }
      .item-right{
        font-size: .28rem;
        .num{
          color: $mainColor;
          margin-bottom: .1rem;
        }
        .status{
          color: #999;
        }
      }
    }
  }
</style>
<template>
  <div class="container hasNav">
    <van-nav-bar :title="title" left-arrow left-text="返回" @click-left="$router.back()" fixed />

    <template v-if="type === 1">
      <div class="income-list" v-if="incomeList.length">
        <div
            class="item"
            v-for="(item, index) in incomeList"
            :key="index"
            @click="$router.push(`/user/incomeDetail?type=1&detail=${JSON.stringify(item)}`)">
          <div class="item-left">
            <div class="tit">{{item.costType}}</div>
            <div class="date">{{item.payTime}}</div>
          </div>
          <div class="item-right">
            <div class="num">{{item.payMoney}}</div>
            <div class="status">{{item.drawingsStatus}}</div>
          </div>
        </div>
      </div>

      <div class="com-no-date" v-else>您还没有收入明细</div>
    </template>
    <template v-else>
      <div class="income-list" v-if="withdrawalList.length">
        <div
            class="item"
            v-for="(item, index) in withdrawalList"
            :key="index">
          <div class="item-left">
            <div class="tit">提现</div>
            <div class="date">{{item.date}}</div>
          </div>
          <div class="item-right">
            <div class="num">{{item.money}}</div>
          </div>
        </div>
      </div>

      <div class="com-no-date" v-else>您还没有提现明细</div>
    </template>

  </div>
</template>

<script>
  import { getIncomeList, getWithdrawalList } from "../../api/user";

  export default {
    name: 'IncomeList',
    data() {
      return {
        title: '',
        type: 1,
        incomeList: [],
        withdrawalList: []
      };
    },
    mounted() {
      this.type = +this.$route.query.type
      if(this.type === 1) {
        this.title = '累计收入'
        this.getIncomeList()
      }
      if(this.type === 2) {
        this.title = '累计提现'
        this.getWithdrawalList()
      }
    },
    methods: {
      async getIncomeList() {
        let params = {
          page: 1
        }
        const { myIncomeList } = await getIncomeList(params)
        this.incomeList = myIncomeList
      },
      async getWithdrawalList() {
        const { myDrawingsList } = await getWithdrawalList()
        this.withdrawalList = myDrawingsList
      }
    }
  };
</script>
